/**
 * 回顾 useReduer 的使用，来理解 redux 中两个原则
 *
 *  1. state 是只读的
 *  2. 使用纯函数来执行修改 reducer
 */

import React, { useReducer } from "react";
import ReactDOM from "react-dom/client";

function App() {
  /**
   * 定义个 countReducer 函数
   * @param {*} prevState 上一次的 state 数据
   * @param {*} action 动作对象，包含有 type 属性的一个对象
   */
  function countReducer(prevState, action) {
    // 根据 action 的 type 的不同，来操作数据
    // 这个函数需要返回新的 state 数据

    // prevState + 1; 不能直接修改原始数据
    // 需要返回一份全新的数据
    console.log("prevState", prevState);

    switch (action.type) {
      case "increment":
        // prevState.count++;
        // return prevState;
        return { count: prevState.count + 1 };
      case "decrement":
        return { count: prevState.count - 1 };
      default:
        // 不修改数据。
        return prevState;
    }
  }

  const [state, dispatch] = useReducer(countReducer, { count: 0 });

  console.log(state);
  return (
    <div>
      <h1>App</h1>
      <p>count: {state.count}</p>
      <button
        onClick={() => {
          // 调用dispatch,传递一个动作对象（最新执行了 reducer ）
          dispatch({ type: "increment" });
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          dispatch({ type: "decrement" });
        }}
      >
        -
      </button>
    </div>
  );
}

ReactDOM.createRoot(document.querySelector("#root")).render(<App />);
